.list-container {
  list-style: none;
}

.list-item {
  margin-bottom: 10px;
}

.list-title {
  font-size: 16px; /* 标题文字大小 */
  font-weight: bold; /* 字体加粗 */
  margin-bottom: 10px; /* 添加与主要内容的间隔 */
  color: var(--prism-color);
}

.list-content ul {
  list-style: none; /* 去掉列表默认的项目符号 */
  padding: 10px; /* 一些内边距 */
}

.list-content ul li {
  background: #fff; /* 列表项背景为白色 */
  margin-bottom: 8px; /* 列表项之间的间距 */
  padding: 10px;
  border-radius: 4px; /* 圆角边框 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 列表项阴影效果 */
}

/* 增添一些交互效果 */
.list-content ul li:hover {
  background: #f0f0f0; /* 鼠标移动到列表项上时改变背景颜色 */
}

//color - card
.card-color {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap: 10px;
  overflow-y: auto;
  // height: 400px;

  .color-item {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    background-color: var(--content-bg);
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    transition: .3s ease;

    &:hover {
      transform: scale(1.02);
      background-color: var(--theme-bg-color);
    }

    div {
      border-radius: 10px;
      height: 120px;
      width: 100%;
    }
  }
}

.cards-item {
  span {
    text-align: center;
    display: block;
  }
}

